<template>
  <div class="shopHeader">
     <div class="home"> <van-icon  name="home-o"  @click="home"/></div>
     <div  class="headerText"> <text>网易严选</text></div>
      <div class="search"><van-icon  name="search"  /></div>
      <div class="shop"  @click="goCart"><van-icon  name="shopping-cart-o" /></div>
  </div>
</template>

<script lang="ts">
export default {
  name:'Header'

}
</script>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router = useRouter(); 

const home=() => {
  router.push('/home')
}
const goCart = () => {
  router.push('/cart');
};
</script>

<style lang="less">
  .shopHeader {
    width: 100vw;
    height: 44px;
    display: flex;
    text-align: center;
    justify-content: space-around;
    margin-top: 10px;
    border-bottom: 1px solid #666;
    .home {
      width: 24px;
      height: 22px;
      margin-left: 10px;
      line-height: 44px;
    }
    .headerText {
      flex: 1;
      font-size: 16px;
      line-height: 44px;
    }
    .search {
      width: 24px;
      height: 22px;
      margin-right: 20px;
      line-height: 44px;
    }
    .shop {
      width: 24px;
      height: 22px;
      margin-right: 10px;
      line-height: 44px;
    }
  }

</style>